import React from 'react';
import styles from './index.module.scss';
import clusterImg from '../../assets/cluster/cluster-down.png';
import Typography from '../typography';
import StudyStyle from '../study-style';

const { Header } = Typography;

const MainStyle = ({ type, data, result }) => {
  // type决定央视 data决定数据
  console.log('MainStyle中的type', type, data, result[0].percent);
  return (
    <div className={styles.mainStyle}>
      <div className={styles.title}>
        <div className={styles.styleTest}>专属学习风格测试</div>
        <div className={styles.dnRecomment}>丹尼推荐</div>
      </div>
      <div className={styles.main}>
        <img src={clusterImg} alt="" className={styles.cluster} />
        <div className={styles.pie}></div>
      </div>
      <Header type="result_main_title">你的主导学习风格为</Header>
      {/* 默认为V */}
      <StudyStyle type={type} data={data} size="big" isShow={true} percent={result[0].percent}/>
    </div>
  );
};

export default MainStyle;
